<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.4.3/layui.all.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .container {
            min-height: 100vh;
        }

        .nav {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 44px;
        }

        .close,
        .close-popup {
            position: absolute;
            left: 15px;
            font-size: 21px;
        }

        .form {
            padding: 50px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .item {
            margin-top: 25px;
            background-color: #f2f6fc;
            padding: 8px;
            border-radius: 25px;
        }

        .get-code {
            margin-top: 25px;
            font-size: 8pt;
        }

        .num {
            color: #39B610;
            font-size: 12pt;
        }

        input {
            background-color: inherit;
            outline: none;
            border: none;
            text-align: center;
            font-size: 12pt;
        }

        .btn {
            margin-top: 25px;
            display: flex;
        }

        .button {
            flex: 1;
            background-color: #39B610;
            padding: 5px 70px;
            border: none;
            border-radius: 30px;
            color: #fff;
        }

        .sub {
            margin-top: 15px;
            font-size: 8pt;
        }

        .popup {
            width: 90vw;
            height: 90vh;
            display: flex;
            z-index: 100;
            background-color: #FFFFFF;
            padding: 15px;
            font-size: 12pt;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <div class="form">
            <div class="item">
                <input type="tel" name="mobile" maxlength="11" id="mobile" placeholder="请填写手机号" />
            </div>
            <div class="item">
                <input type="number" maxlength="4" name="code" id="code" placeholder="请输入验证码" />
            </div>
            <div class="get-code">
                <p id="get_Code">获取验证码</p>
                <span class="num"></span>
            </div>
            <div class="item">
                <input type="number" maxlength="6" name="invite_code" id="invite_code" value="{$code}" placeholder="请输入邀请码" />
            </div>
            <div class="item">
                <input type="password" name="password" id="password" placeholder="请输入密码" />
            </div>
            <div class="item">
                <input type="password" name="re_password" id="re_password" placeholder="请再次输入密码" />
            </div>
            <div class="btn">
                <button type="button" class="button">注册</button>
            </div>
            <div class="sub">
                <p>注册即代表您同意<a id="user_xieyi" href="javascript:">《用户协议》</a>和<a id="self_xieyi" href="javascript:">《隐私条款》</a></p>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var user_xieyi_content = '',
        self_xieyi_content = ''

    // 初始化
    $(document).ready(function() {
        $('#mobile').val(''),
            $('#code').val(''),
            $('#password').val(''),
            $('#re_password').val('')
        // 获取用户协议和隐私条款
        $.ajax({
            url: "{:url('api/common/getAgreement')}",
            type: "GET",
            dataType: "json",
            success: function(res) {
                if (res.code === 200) {
                    user_xieyi_content = res.data[2].content
                    self_xieyi_content = res.data[3].content
                } else {
                    layer.msg(res.msg)
                }
            }
        });
    })

    // 获取验证码
    $('#get_Code').on('click', function() {
        let mobile = $('#mobile').val()
        if(mobile !== '') {
            $("#get_Code").hide()
            $(".num").show()
            var second = 120
            $(".num").text((second) + "秒")
            var interval = setInterval(function() {
                second--
                $(".num").text((second) + "秒")
                if (second === -1) {
                    $("#get_Code").text("重发验证码")
                    clearInterval(interval)
                    $(".num").hide()
                    $("#get_Code").show()
                }
            }, 1000)
            // 参数
            let data = {
                mobile: mobile,
                type: 2
            }
            // 获取验证码
            $.ajax({
                url: "{:url('api/login/getSmCode')}",
                data: data,
                type: "POST",
                dataType: "json",
                success: function(res) {
                    if (res.code === 200) {
                        layer.msg(res.msg)
                    } else {
                        layer.msg(res.msg)
                    }
                }
            });
        } else {
            layer.msg('请输入手机号')
        }
    })
    // 用户协议 弹窗
    $('#user_xieyi').on('click', function() {
        const user_xieyi = layer.open({
            type: 1,
            title: '用户协议',
            closeBtn: 1,
            content: '<div class="popup">'+ user_xieyi_content +'</div>'
        });
    })
    // 隐私协议 弹窗
    $('#self_xieyi').on('click', function() {
        const user_xieyi = layer.open({
            type: 1,
            title: '隐私协议',
            closeBtn: 1,
            content: '<div class="popup">'+ self_xieyi_content +'</div>'
        });
    })
    // 注册按钮事件
    $('.button').on('click', function() {
        let mobile = $('#mobile').val(),
            code = $('#code').val(),
            invite_code = $('#invite_code').val(),
            password = $('#password').val(),
            re_password = $('#re_password').val()
        // 表单校验
        if (mobile == '' || mobile == undefined || mobile == null) {
            layer.msg('请输入手机号');
            return false
        }
        if (code == '' || code == undefined || code == null) {
            layer.msg('请输入验证码');
            return false
        }
        if (invite_code == '' || invite_code == undefined || invite_code == null) {
            layer.msg('请输入邀请码');
            return false
        }
        if (password == '' || password == undefined || password == null) {
            layer.msg('请输入密码');
            return false
        }
        if (re_password == '' || re_password == undefined || re_password == null) {
            layer.msg('请再次输入密码');
            return false
        } else {
            if (password !== re_password) {
                layer.msg('密码不一致，请重新输入密码');
                return false
            }
        }
        // 参数
        let data = {
            mobile: mobile,
            sm_code: code,
            code: invite_code,
            password: password,
            password_confirm: re_password
        }
        // 注册
        $.ajax({
            url: "{:url('api/login/register')}",
            data: data,
            type: "POST",
            dataType: "json",
            success: function(res) {
                if (res.code === 200) {
                    layer.msg(res.msg)
                    setTimeout(() => {
                        // 跳转到下载页面
                        window.location.href="{:url('download')}"
                    }, 2000)
                } else {
                    layer.msg(res.msg)
                }
            }
        });
    })
</script>
</html>
